<template>
    <div class="food-ratings-container">
        <div class="food-ratings-header">
            <div class="switch-area border-1px-bottom">
                <div class="switch-btn positive" :class="{'active':selectType===0}" @click="changeSelectType(0)"><span
                        class="switch-desc">{{selectMsg.all}}</span><span class="switch-count">{{allRatings.length}}</span>
                </div>
                <div class="switch-btn positive" :class="{'active':selectType===1}" @click="changeSelectType(1)"><span
                        class="switch-desc">{{selectMsg.positive}}</span><span class="switch-count">{{positiveRatings.length}}</span>
                </div>
                <div class="switch-btn nagative" :class="{'active':selectType===2}" @click="changeSelectType(2)"><span
                        class="switch-desc">{{selectMsg.nagative}}</span><span class="switch-count">{{nagativeRatings.length}}</span>
                </div>
            </div>
        </div>
        <div class="read-switch-area" :class="{'active':readContent}" @click="toggleContent">
            <i class="icon-check_circle"></i>
            <span class="read-msg">只看有内容的评价</span>
        </div>
    </div>
</template>
<script type="es6">
    const all = 0
    const positive = 1
    const nagative = 2
    export default {
        props: {
            selectType: {
                type: Number,
                default: 0
            },
            ratings: {
                type: Array,
                default () {
                    return []
                }
            },
            selectMsg: {
                type: Object,
                default () {
                    return {}
                }
            },
            readContent:{
                type:Boolean,
                default:true
            }
        },
        data () {
            return {
            }
        },
        methods: {
            changeSelectType (type) {
                this.$emit("changeType",type)
            },
            toggleContent () {
                this.$emit("changeReadContent",!this.readContent)
            }
        },
        computed: {
            allRatings () {
                return this.ratings.filter((rating)=> {
                    if(this.readContent){
                        return rating.text && rating.text!=""
                    }else{
                        return true
                    }

                })
            },
            positiveRatings () {
                return this.ratings.filter((rating)=> {
                    if(this.readContent){
                        return rating.rateType === 0 && rating.text && rating.text!=""
                    }else{
                        return rating.rateType === 0
                    }

                })
            },
            nagativeRatings () {
                return this.ratings.filter((rating)=> {
                    if(this.readContent){
                        return rating.rateType === 1 && rating.text && rating.text!=""
                    }else{
                        return rating.rateType === 1
                    }
                })
            }
        }
    }
</script>
<style lang="less" rel="stylesheet/less">
    @import "../../../public/stylesheet/mixin.less";

    .food-ratings-container {
        width: 100%;
        .switch-area {
            margin-left: 18px;
            margin-right: 18px;
            display: flex;
            padding-bottom: 18px;
            .border-1px-bottom(rgba(7, 17, 27, 0.1));
            .switch-btn {
                padding: 8px 12px;
                border-radius: 2px;
                margin-right: 8px;
                font-size: 0;
                .switch-desc {
                    font-size: 12px;
                    margin-right: 2px;
                }
                .switch-count {
                    font-size: 10px;
                }
            }
            .positive {
                background: rgba(0, 160, 220, .2);
                .switch-desc {
                    color: rgb(77, 85, 93);
                }
                .switch-count {
                    color: rgb(77, 85, 93);
                }
                &.active {
                    background: rgb(0, 160, 220);
                    .switch-desc {
                        color: rgb(255, 255, 255);
                    }
                    .switch-count {
                        color: rgb(255, 255, 255);
                    }
                }
            }
            .nagative {
                background: rgba(77, 85, 93, 0.2);
                .switch-desc {
                    color: rgb(77, 85, 93);
                }
                .switch-count {
                    color: rgb(77, 85, 93);
                }
                &.active {
                    background: rgb(77, 85, 93);
                    .switch-desc {
                        color: rgb(255, 255, 255);
                    }
                    .switch-count {
                        color: rgb(255, 255, 255);
                    }
                }
            }
        }
        .read-switch-area{
            padding:12px 0 12px 18px;
            border-bottom:1px solid rgba(7,17,27,0.1);
            &.active{
                .icon-check_circle{
                    color:#00c850;
                }
            }
            .icon-check_circle{
                vertical-align:middle;
                font-size:24px;
                color:rgb(147,153,159);
                margin-right:4px;
            }
            .read-msg{
                vertical-align:middle;
                font-size:12px;
                line-height:24px;
                color:rgb(147,153,159);

            }
        }

    }
</style>